<template>
  <div>
    <el-dialog
      class="dialog-class"
      width="1200px"
      v-model="dialogVisible"
      destroy-on-close
    >
      <div class="Share">
        <el-button @click="downFileChange">下载</el-button>
        <el-button
          class="m-2"
          @mouseover="isShowQrImage = true"
          @mouseout="isShowQrImage = false"
          >分享</el-button
        >
        <div v-show="isShowQrImage" class="qr-box">
          <img style="width: 100%; height: 100%" :src="shareQrImage" />
        </div>
      </div>
      <el-tabs v-model="activeName" v-loading="isRequest">
        <el-tab-pane label="基础信息" name="first">
          <bascInfo :userData="userData"></bascInfo>
        </el-tab-pane>
        <el-tab-pane label="更多信息" name="fourth">
          <moreInfo :userData="userData"></moreInfo>
        </el-tab-pane>
        <el-divider />

        <div style="display: flex; justify-content: flex-end">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveChange">保存</el-button>
        </div>
      </el-tabs>

      <!--下载文件-->
      <downFileDate ref="filedown"></downFileDate>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import downFileDate from './downFileDate.vue';
import bascInfo from './bascInfo.vue';
import moreInfo from './moreInfo.vue';
import { getUser, userCreate, userExport } from '@/api/leader/Filling.js';
import studentsStore from '@/store/modules/students';
import { ElMessage } from 'element-plus';
import QRCode from 'qrcode';

const studentStore = studentsStore(); // 学生信息仓库
const studentInfo = ref({}); // 学生信息

const dialogVisible = ref(false);
const activeName = ref('first');
const filedown = ref(null);
const userData = ref({}); // 保存用户信息

const isRequest = ref(false);
const shareUrl = ref(''); // 下载地址
const isShowQrImage = ref(false); // 是否显示下载二维码
const shareQrImage = ref(null); // 分享二维码图片

function openChange(val) {
  // 打开弹窗
  dialogVisible.value = true;
  userData.value = {
    ...val,
  }; // 保存回显数据

  getUser({
    id: val.studentId,
  }).then((res) => {
    studentInfo.value = res.data;
    studentStore.setStudentInfo(studentInfo.value);
  });

  userExport({
    studentId: userData.value.studentId,
  }).then((res) => {
    shareUrl.value = res.data.url;

    // 生成二维码
    generateQR(shareUrl.value).then((res) => {
      shareQrImage.value = res;
    });
  });
}

function downFileChange() {
  // 下载文件
  window.location.href = shareUrl.value;
  ElMessage.success('导出成功');
}

// 点击保存
function saveChange() {
  isRequest.value = true;
  userCreate(studentInfo.value)
    .then(() => {
      ElMessage({
        message: '更新成功',
        type: 'success',
      });

      dialogVisible.value = false;
      isRequest.value = false;
    })
    .catch(() => {
      isRequest.value = false;
    });
}

const generateQR = async (text) => {
  try {
    const opts = {
      errorCorrectionLevel: 'H',
      type: 'image/png',
      quality: 0.9,
      margin: 1,
    };
    const qrImage = await QRCode.toDataURL(text, opts);
    return qrImage;
  } catch (error) {
    console.log('error', error);
  }
};

// 暴露方法
defineExpose({
  openChange,
});
</script>
<style lang="scss">
.Share {
  width: 160px;
  height: 40px;
  position: absolute;
  top: 32px;
  right: 10px;
  z-index: 999;
}

.dialog-class {
  border-radius: 6px;

  .el-dialog__header {
    display: none;
  }
}
</style>
<style lang="scss" scoped>
:deep(.el-tabs__item.is-active) {
  color: #1d2129;
  font-weight: 600;
}

:deep(.el-tabs__active-bar) {
  height: 3px;
  background-color: #1d2129;
}

:deep(.el-tabs__item) {
  height: 52px;
  line-height: 52px;
  color: #4e5969;
  font-size: 20px;
}

.qr-box {
  position: absolute;
  top: 40px;
  right: 0;
  width: 120px;
  height: 120px;
  border: 1px #efefef solid;
  padding: 5px;
  background-color: white;
  z-index: 999;
  box-shadow: 1px 1px 4px 1px #efefef;
  border-radius: 5px;
}
</style>
